<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8' />
    <title>Add a 3D model</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />

<!--    <link href='https://lbs.sgmap.cn/api/epgis-1.5.0.css' rel='stylesheet' />-->
<!--    <script src='https://lbs.sgmap.cn/api/epgis-js-1.5.0.min.js'></script>-->
    <link rel="stylesheet" href='http://172.16.85.201/api/epgis-1.5.0.css'/>
    <script type="text/javascript" src='http://172.16.85.201/api/epgis-js-1.5.0.min.js'></script>

    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>

<body>

<!--<script src='https://lbs.sgmap.cn/products/docs/assets/js/threejs/three.js'></script>-->
<!--<script src="https://lbs.sgmap.cn/products/docs/assets/js/threejs/GLTFLoader.js"></script>-->
<script src='http://10.134.216.95:8233/gis/js/three.js'></script>
<script src="http://10.134.216.95:8233/gis/js/GLTFLoader.js"></script>
<script src="http://10.134.216.95:8233/gis/js/OBJLoader.js"></script>

<div id='map'></div>
<script>

    var map;

    epgis.tokenTask.login('7b65df143ad533e8bb7faf9f4896c7af',"a8553e352b0c3a67993b5447dbd96914").then(function(){
        initMap();
    });


    function initMap() {

        map = window.map = new epgis.Map({
            container: 'map',
            style: 'aegis://styles/aegis/StreetsLight',
            zoom: 17.7,
            center: [119.9806, 31.5694],
            pitch: 60,
            localIdeographFontFamily: "'PingFang SC', 'Microsoft YoHei'",
        });

        var modelOrigin = [119.9806, 31.5694];
        var modelAltitude = 0;
        var modelRotate = [0, 0, Math.PI / 4];
        var modelScale = 5.41843220338983e-6;

        var modelTransform = {
            translateX: epgis.MercatorCoordinate.fromLngLat(modelOrigin, modelAltitude).x,
            translateY: epgis.MercatorCoordinate.fromLngLat(modelOrigin, modelAltitude).y,
            translateZ: epgis.MercatorCoordinate.fromLngLat(modelOrigin, modelAltitude).z,
            rotateX: modelRotate[0],
            rotateY: modelRotate[1],
            rotateZ: modelRotate[2],
            scale: modelScale
        };

        var THREE = window.THREE;

        var customLayer = {
            id: '3d-model',
            type: 'custom',
            renderingMode: '3d',
            onAdd: function (map, gl) {
                this.camera = new THREE.Camera();
                this.scene = new THREE.Scene();

                var directionalLight = new THREE.DirectionalLight(0xffffff);
                directionalLight.position.set(0, -70, 100).normalize();
                this.scene.add(directionalLight);

                var directionalLight2 = new THREE.DirectionalLight(0xffffff);
                directionalLight2.position.set(0, 70, 100).normalize();
                this.scene.add(directionalLight2);

                var loader = new THREE.GLTFLoader();
                loader.load('./assets/model/changshu/output.gltf', (function (gltf) {
                    console.log(gltf)
                    let group = new THREE.Group()

                    group.add(gltf.scene)

                    let box = new THREE.Box3()

                    box.setFromObject(group)

                    let wrapper = new THREE.Object3D()

                    wrapper.add(group)

                    // wrapper.position.set(100, -300, 120)


                    this.scene.add(wrapper)
                    // this.scene.add(gltf.scene);
                }).bind(this));
                this.map = map;

                this.renderer = new THREE.WebGLRenderer({
                    canvas: map.getCanvas(),
                    context: gl
                });

                this.renderer.autoClear = false;
            },
            render: function (gl, matrix) {
                var rotationX = new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(1, 0, 0), modelTransform.rotateX);
                var rotationY = new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(0, 1, 0), modelTransform.rotateY);
                var rotationZ = new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(0, 0, 1), modelTransform.rotateZ);

                var m = new THREE.Matrix4().fromArray(matrix);
                var l = new THREE.Matrix4().makeTranslation(modelTransform.translateX, modelTransform.translateY, modelTransform.translateZ)
                    .scale(new THREE.Vector3(modelTransform.scale, -modelTransform.scale, modelTransform.scale))
                    .multiply(rotationX)
                    .multiply(rotationY)
                    .multiply(rotationZ);

                this.camera.projectionMatrix.elements = matrix;
                this.camera.projectionMatrix = m.multiply(l);
                this.renderer.state.reset();
                this.renderer.render(this.scene, this.camera);
                this.map.triggerRepaint();
            }
        };

        map.on('style.load', function () {
            map.addLayer(customLayer);
        });

    }

</script>

</body>

</html>
